window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {

   canvasApp();

}

function canvasSupport () {
     return Modernizr.canvas;
}

function canvasApp(){

   if (!canvasSupport()) {
          return;
     }else{
      var theCanvas = document.getElementById("canvas");
      var context = theCanvas.getContext("2d");
   }
   
var photo = new Image();
var sprite = new Image();
sprite.src="reptile.png";
photo.addEventListener('load', eventPhotoLoaded , false);
photo.src = "bigmap.png";
var windowWidth = theCanvas.width;
var windowHeight = theCanvas.height;
var windowX = 0;
var windowY = 0;

var currentScale = 1;
var minScale = .2
var maxScale = 3;
var scaleIncrement = .1;

var mouseStartX=0;
var mouseStartY=0;
var mouseEndX=0;
var mouseEndY=0;

var startRect;

var destX=0;
var destY=0;
var speedX=5;
var speedY=5;
var currentPosX=50;
var currentPosY=50;


theCanvas.addEventListener('mousedown', eventMouseDown, false);
theCanvas.addEventListener('mousemove', eventMouseMove, false);
theCanvas.addEventListener('mouseup',   eventMouseUp, false);


function eventMouseDown(event) {
	mouseStartX = event.layerX;
	mouseStartY = event.layerY;
	//theCanvas.width = theCanvas.width;
	//	  context.strokeRect(mouseStartX,mouseStartY,300,500);
	startRect = true;
	
	if (event.which==3){
		destX = event.layerX + windowX;
		destY = event.layerY + windowY;
		console.log("destination is" + destX + "," + destY);
		console.log("currentpos is" + currentPosX + "," + currentPosY);
		startRect=false;
		}
  
}

function eventMouseMove(event) {
	mouseEndX=event.layerX;
	mouseEndY=event.layerY;
	}

function eventMouseUp(event) {
	startRect = false;
}


function eventPhotoLoaded() {
   startUp();
}



function drawScreen() {
	context.fillRect(0,0,theCanvas.width,theCanvas.height);
	
	if (currentPosX<destX){
		currentPosX+=speedX;}
	if (currentPosX>destX){
		 currentPosX-=speedX;}
	

	if (currentPosY<destY){
		currentPosY+=speedY;}
	if (currentPosY>destY){
		currentPosY-=speedY;}


	context.drawImage(photo, windowX, windowY, windowWidth, windowHeight, 0, 0, windowWidth*currentScale,windowHeight*currentScale);
	context.lineWidth = 2;
	context.strokeStyle = "#33FF00";
	context.drawImage(sprite, currentPosX-windowX, currentPosY-windowY);
	context.strokeRect(currentPosX-windowX, currentPosY-windowY, 32,32);
	if (startRect == true) {
		context.lineWidth = 3;
		context.strokeStyle = "#33FF00";
		context.strokeRect(mouseStartX,mouseStartY,mouseEndX-mouseStartX,mouseEndY-mouseStartY);
	}

	
	



}
  
function startUp(){
	setInterval(drawScreen, 1000/60 );
}

theCanvas.oncontextmenu=function(){
	return false
}
	
document.onkeydown = function(e){
	e = e?e:window.event;
	console.log(e.keyCode + "down");
	switch (e.keyCode){
	  case 87:
			//up
			windowY-=10;
			currentPosY-=10;
			if (windowY<0){
			   windowY = 0;
			}
			break;
	  case 83:
			//down
			windowY+=10;
			currentPosY+=10;
			if (windowY>photo.height - windowHeight){
			   windowY = photo.height - windowHeight;
			}
			break;
	  case 65:
			//left
			windowX-=10;
			currentPosX-=10;
			if (windowX<0){
			   windowX = 0;
			}
			break;
	  case 68:
			//right
			windowX+=10;
			currentPosX+=10;
			if (windowX>photo.width - windowWidth){
			   windowX = photo.width - windowWidth;
			}
			break;
	  case 109:
			//-
			currentScale-=scaleIncrement;
			if (currentScale<minScale){
			   currentScale = minScale;
			}
			break;
	 case 107:
			//+
			currentScale+=scaleIncrement;
			if (currentScale>maxScale){
			   currentScale = maxScale;
		}
	}
}
}

